<template>
    <view class="editor-upload">
        <!-- 封面背景层 -->
        <view class="cover-container">
            <!-- 背景图 -->
            <image class="cover-background" :src="userData.coverUrl" />

            <!-- 返回按钮 -->
            <view class="nav-back" @click="handleBack">
                <han-icon name="return" size="38" />
            </view>

            <!-- 上传封面按钮 -->
            <view class="upload-cover-btn" @click="handleUploadCover">
                <han-icon name="camera" size="38" />
                <text class="btn-text">更换封面</text>
            </view>

            <!-- 用户头像 -->
            <view class="avatar-wrapper" @click="handleUploadAvatar">
                <image class="user-avatar" :src="userData.avatarUrl" />
                <han-icon name="camera" size="64" class="avatar-edit" />
            </view>
        </view>

        <!-- 其他内容 -->
    </view>
</template>

<script setup>
import { onMounted, ref, computed } from 'vue';
import { useUserStore } from '@/stores/userStores';

const userStore = useUserStore();

// 使用计算属性获取用户数据
const userData = computed(() => userStore.currentUser);

const handleBack = () => {
    uni.navigateBack();
};

onMounted(async () => {
    await userStore.init();
    userData.value = userStore.currentUser;
});

// 处理上传封面
const handleUploadCover = () => {
    uni.chooseImage({
        count: 1,
        success: async (res) => {
            const tempFilePath = res.tempFilePaths[0];
            try {
                uni.uploadFile({
                    url: 'http://localhost:8000/api/user/uploadCover', // 或通过代理路径
                    filePath: tempFilePath,
                    name: 'file',
                    header: {
                        Authorization: `Bearer ${userStore.token}`
                    },
                    success: async () => {
                        // 更新用户数据
                        await userStore.fetchCurrentFullUserInfo();

                        userData.value = userStore.currentUser;
                        uni.showToast({ title: '封面更新成功', icon: 'none' });
                    },
                    fail: (error) => {
                        console.error('封面上传失败:', error);
                        uni.showToast({ title: '封面上传失败', icon: 'none' });
                    }
                });
            } catch (error) {
                console.error('上传封面失败:', error);
            }
        }
    });
};

// 处理上传头像
const handleUploadAvatar = () => {
    uni.chooseImage({
        count: 1,
        success: async (res) => {
            const tempFilePath = res.tempFilePaths[0];
            try {
                uni.uploadFile({
                    url: 'http://localhost:8000/api/user/uploadAvatar',
                    filePath: tempFilePath,
                    name: 'file',
                    header: {
                        Authorization: `Bearer ${userStore.token}`
                    },
                    success: async () => {
                        // 更新用户数据
                        await userStore.fetchCurrentFullUserInfo();

                        userData.value = userStore.currentUser;
                        uni.showToast({ title: '头像更新成功' });
                    },
                    fail: (error) => {
                        console.error('头像上传失败:', error);
                        uni.showToast({ title: '头像上传失败', icon: 'none' });
                    }
                });
            } catch (error) {
                console.error('上传头像失败:', error);
            }
        }
    });
};
</script>

<style lang="scss">
.editor-upload {
    position: relative;

    .cover-container {
        position: relative;
        height: 400rpx;

        .cover-background {
            width: 100%;
            height: 100%;
            opacity: 0.8;
        }

        .nav-back {
            width: 66rpx;
            height: 66rpx;
            position: absolute;
            left: 20rpx;
            top: 40rpx;
            z-index: 10;
            background: rgba(0, 0, 0, 0.3);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .upload-cover-btn {
            position: absolute;
            right: 20rpx;
            top: 40rpx;
            z-index: 10;
            display: flex;
            align-items: center;
            padding: 12rpx 24rpx;
            background: rgba(0, 0, 0, 0.3);
            border-radius: 40rpx;

            .btn-text {
                color: $han-global-bg-color;
                font-size: 24rpx;
                margin-left: 10rpx;
            }
        }

        .avatar-wrapper {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            z-index: 10;

            .user-avatar {
                width: 180rpx;
                height: 180rpx;
                border-radius: 50%;
                border: 4rpx solid $han-secondary-color;
            }

            .avatar-edit {
                position: absolute;
                right: 0;
                bottom: 0;
                background: $han-success-color;
                border-radius: 50%;
            }
        }
    }
}
</style>
